<template>
  <div>
    <!-- 搜索 -->
    <el-button @click="goBack" type="primary" style="margin-top: 10px; margin-left: 20px">返回</el-button>
    <page-main>
      <!-- <el-button size="mini" type="primary" @click="addEditSocialUnit">添加</el-button> -->
      <el-table :data="tableData" v-loading="tableDataLoading">
        <el-table-column label="消防站名称" prop="station_name"> </el-table-column>
        <el-table-column label="联系人" prop="contacts"> </el-table-column>
        <el-table-column label="电话" prop="phone"> </el-table-column>

        <el-table-column label="图片" prop="phone">
          <template #default="scope">
            <div class="picture">
              <img :src="scope.row.picture" alt="" />
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作"  fixed="right"  >

            <template #default="scope">
              <div>

                <el-button size="mini" type="info" @click="lookDetails(scope.row)"
                  >查看</el-button
                >
              </div>

            </template>
          </el-table-column> -->
      </el-table>
      <!-- <div class="block">
          <el-pagination
            :current-page="pagination.page"
            :total="total"
            :page-size="pagination.size"
            :page-sizes="pagination.sizes"
            :layout="pagination.layout"
            class="pagination"
            background
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
          />
        </div> -->
    </page-main>
  </div>
</template>
<script>
// 分页
import paginationMixin from '@/mixins/pagination'
export default {
  // 分页
  mixins: [paginationMixin],
  data() {
    return {
      // 总页数
      total: 0,
      cascaderProps: {
        label: 'name',
        value: 'id',
        children: 'sub_item',
        checkStrictly: true,
        leaf: 'children'
      },

      disabled: false,
      upLoadImgData: {
        type: 'image'
      },
      upLoadFlieData: {
        type: 'file'
      },
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      tableData: [],
      tableDataLoading: false,
      search: '',
      tableDataInfo: '',
      fatherId: '',
      dialogFormVisible: false,

      floorOriginal: {},

      id: '',
      floorInfoDialog: false
    }
  },
  watch: {
    mapIsShow(newData) {
      if (!newData) {
        this.searchInput = ''
      }
    }
  },
  computed: {
    upLoadImgHeader() {
      return {
        'A-Token': this.$store.state.user.a_token,
        'U-Token': this.$store.state.user.u_token
      }
    }
  },
  created() {
    // this.$api
    //   .get("/unit/RegionArea/getAreaTree", {
    //     params: {
    //       region_id: this.$store.state.user.user_info.region_id,
    //     },
    //   })
    //   .then((res) => {
    //     this.interLists = res.data;
    //   });
    // this.fatherId = this.$route.params.id;
    this.getDataList()
  },

  methods: {
    goBack() {
      this.$router.go(-1)
    },
    deleteFloorInfo(row) {
      this.$api.post('/unit/BuildingFloor/delete', { id: row.id }).then((res) => {
        this.$message.success('删除成功')
        this.addEditFloorInfoDialog = false
        this.getFloorData()
      })
    },
    editFloorInfo(row) {
      let temp = this.floorParams
      for (let key in temp) {
        temp[key] = row[key]
      }
      temp.id = row.id
      this.floorParams = temp
      this.addEditFloorInfoDialog = true
    },
    //楼层建筑关闭回调
    addEditFloorInfoDialogCloseEvent() {
      for (let key in this.floorParams) {
        this.floorParams[key] = ''
      }
    },
    submitFloorInfo() {
      this.$refs['floorInfoForm'].validate((valid) => {
        if (valid) {
          if (this.floorParams.id) {
            this.$api
              .post('/unit/BuildingFloor/edit', {
                building_id: this.buildingId,
                ...this.floorParams
              })
              .then((res) => {
                this.$message.success('操作成功')
                this.addEditFloorInfoDialog = false
                this.getFloorData()
              })
          } else {
            this.$api
              .post('/unit/BuildingFloor/add', {
                building_id: this.buildingId,
                ...this.floorParams
              })
              .then((res) => {
                this.$message.success('操作成功')
                this.addEditFloorInfoDialog = false
                this.getFloorData()
              })
          }
        } else {
          this.$message.error('请填写完整')
          return false
        }
      })
    },

    onExceed() {
      this.$message({
        showClose: true,
        message: '如需更改，请先删除已上传的',
        type: 'error'
      })
    },
    getDataList(page) {
      //   let pageNum = 1;
      //   if (page) {
      //     pageNum = page;
      //   }
      this.tableDataLoading = true
      let user_info = this.$store.state.user.user_info
      // // 分页
      // let params = {
      //   rows: this.pagination.size,
      //   page: this.pagination.page,
      //   region_id: user_info.region_id,
      //   ...this.searchParams,
      // };
      //   获取列表
      // this.$api.post("/unit/Building/lists", params).then((res) => {
      this.$api
        .post('/unit/MiniFireStation/vicinityList')
        .then((res) => {
          console.log(res, 'hhh')
          // return
          this.tableData = res.data
          this.tableDataInfo = res.data
          this.total = res.data.length
        })
        .finally(() => {
          this.tableDataLoading = false
        })
    },

    // 删除
    del(data) {
      let params = {
        id: data.id
      }
      this.$api.post('/unit/Building/delete', params).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
        this.getDataList()
      })
    },
    // 点击详情
    lookDetails(row) {
      this.floorOriginal = {}
      this.disabled = true
      this.id = row.id
      this.point_id = row.point_id
      this.formData = JSON.parse(JSON.stringify(row))
      this.formData.build_time = this.formData.build_time * 1000
      this.dialogFormVisible = true
      if (row.fire_hazard == '0') {
        this.formData.fire_hazard = ''
      }
      if (row.building_category == '0') {
        this.formData.building_category = ''
      }
      if (row.use_nature == '0') {
        this.formData.use_nature = ''
      }
      if (row.structure_type == '0') {
        this.formData.structure_type = ''
      }
      if (row.fire_rating == '0') {
        this.formData.fire_rating = ''
      }
    },
    handleChange(e) {
      this.formData.area_id = e[Number(e.length) - 1]
    },
    handleEdit(index, row) {
      this.id = row.id
      this.point_id = row.point_id
      this.floorOriginal = {
        aboveground_floor: row.aboveground_floor,
        secret_floor: row.secret_floor
      }
      this.formData = JSON.parse(JSON.stringify(row))
      this.formData.build_time = this.formData.build_time * 1000
      this.dialogFormVisible = true
      if (row.fire_hazard == '0') {
        this.formData.fire_hazard = ''
      }
      if (row.building_category == '0') {
        this.formData.building_category = ''
      }
      if (row.use_nature == '0') {
        this.formData.use_nature = ''
      }
      if (row.structure_type == '0') {
        this.formData.structure_type = ''
      }
      if (row.fire_rating == '0') {
        this.formData.fire_rating = ''
      }
      //   this.getMap(this)
      //   this.$getMap(this);
    },
    handleSizeChange(e) {},
    handleCurrentChange(e) {
      this.getDataList(e)
    },
    addEditSocialUnit() {
      this.dialogFormVisible = true
      //   this.getMap(this)
      //   this.$getMap(this);
    },
    closeDialog() {
      this.$refs.childForm.resetFields()
      let temp = this.formData
      for (let key in temp) {
        temp[key] = ''
      }
      this.formData = temp
      this.floorOriginal = {}
      this.disabled = false
      this.id = ''
    }
  }
}
</script>
<style scoped lang="scss">
.block {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
:deep(.el-textarea__inner) {
  height: 100px;
}
.mapBox {
  width: 100%;
  height: 600px;
  #container {
    z-index: 100;
    width: 100%;
    height: 500px;
  }
  .btnBox {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  .search {
    display: flex;
    span {
      width: 100px;
      line-height: 40px;
      text-align: center;
    }
  }
}
.searchBox {
  margin: 20px;
  display: flex;
  background-color: #fff;
  padding: 20px;
  .input {
    width: 10%;
    margin-right: 15px;
  }
  .hint {
    line-height: 40px;
    margin-right: 10px;
  }
  .searchBtn {
    background-color: #2d8cf0;
    color: #fff;
  }
}
.picture {
  width: 120px;
  height: 120px;
  img {
    width: 100%;
    height: 100%;
  }
}
// .block {
//     margin-top: 10px;
//     display: flex;
//     justify-content: center;
// }
</style>
